<template>
	<u-popup :value="value" mode="center" >
		<div class="version">
			<div class="preview-card version-1" >
				<h3 class="preview-title">复习完成！</h3>
				<div class="preview-stats">
					<div class="preview-stat" style="background: #e8f6f3;">
						<div class="preview-stat-value" style="color: #3498db;">421</div>
						<div>总数</div>
					</div>
					<div class="preview-stat" style="background: #e8f6f3;">
						<div class="preview-stat-value" style="color: #2ecc71;">4</div>
						<div>正确</div>
					</div>
					<div class="preview-stat" style="background: #e8f6f3;">
						<div class="preview-stat-value" style="color: #e74c3c;">0</div>
						<div>错误</div>
					</div>
					<div class="preview-stat" style="background: #e8f6f3;">
						<div class="preview-stat-value" style="color: #9b59b6;">421</div>
						<div>提交</div>
					</div>
				</div>
				<div class="message" style="margin-top: 20rpx; background: #f1f8e9; font-size: 24rpx;">
					<p>太棒了！你坚持完成了所有单词的复习！</p>
				</div>
			</div>
		</div>
	</u-popup>
</template>

<script>
	export default {
		props: ['value'],
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.version{
		border-radius: 16rpx;
		overflow: hidden;
	}
	
	::v-deep .u-mode-center-box{
		border-radius: 16rpx;
	}
	/* Preview Cards */
	.preview-card {
		background: white;
		border-radius: 16rpx;
		box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.08);
		width: 480rpx;
		padding: 25rpx;
		transition: transform 0.3s ease;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.preview-card:hover {
		transform: translateY(-10rpx);
	}

	.preview-title {
		font-size: 40rpx;
		color: #2c3e50;
		margin-bottom: 15rpx;
		text-align: center;
	}

	.preview-stats {
		display: flex;
		justify-content: space-between;
		margin: 15rpx 0;
	}

	.preview-stat {
		flex: 1;
		text-align: center;
		padding: 10rpx;
		border-radius: 10rpx;
		margin: 0 5rpx;
		font-size: 24rpx;
	}

	.preview-stat-value {
		font-weight: bold;
		font-size: 28rpx;
		margin-bottom: 5rpx;
	}

	.version-1 .modal {
		background: linear-gradient(145deg, #ffffff 0%, #f0fdf4 100%);
		border: 2rpx solid #2ecc71;
	}

	.version-1 .modal-title {
		color: #27ae60;
	}

	.version-1 .stat-card {
		background: #ecfbf0;
		border: 1rpx solid #d5f5e3;
	}

	.version-1 .stat-card:nth-child(1) .stat-value {
		color: #3498db;
	}

	.version-1 .stat-card:nth-child(2) .stat-value {
		color: #2ecc71;
	}

	.version-1 .stat-card:nth-child(3) .stat-value {
		color: #e74c3c;
	}

	.version-1 .stat-card:nth-child(4) .stat-value {
		color: #9b59b6;
	}
</style>